MapboxGL 柱状图的绘制与展示

GIS韩 2023-05-28 00:22:17 博主文章分类：WebGIS开发 ©著作权

文章标签 mapbox vue 柱状图 bar echarts 文章分类 JavaScript 前端开发

前面的博文中介绍了一下如何在地图上展示饼状图，下面简单介绍一下如何在地图上绘制柱状图：

参数

类型

说明

备注

第一参数id

string

图层id

第二参数data

JsonArray

数据源

[{point:[114.514780,33.777750],values:[[2011,32],[2012,36],[2022,45]]},{point:[114.614780,33.777750],values:[[2011,44],[2012,36],[2022,45]]},{point:[114.614780,33.877750],values:[[2011,44],[2012,36],[2022,45]]}]

options

Json

配置项

见下表

参数

类型

说明

备注

width

int

图标宽度

单位px，偶数 默认60

height

int

图标宽度

强制等于宽度

chartAnchor

string

锚点位置

‘center’ , ‘top’ , ‘bottom’ , ‘left’ , ‘right’ , ‘top-left’ , ‘top-right’ , ‘bottom-left’ , and ‘bottom-right’ ‘center’ , ‘top’ , ‘bottom’ , ‘left’ , ‘right’ , ‘top-left’ , ‘top-right’ , ‘bottom-left’ , and ‘bottom-right’ 默认center

showPopup

boolean

是否展示popup

默认false

popupAnchor

string

popup锚点

‘center’,‘top’,‘bottom’,‘left’,‘right’,‘top-left’,‘top-right’,‘bottom-left’，以及‘bottom-right’ 默认left

popupClassName

string

popup的className

popupHtmlTemplate

string

popup的模版

示例："

{val1}

{val0}会自动替换data中values中的第一个值，以此类推

colors

array[string]

分类颜色16进制

颜色为空或比值的种类少，会自动补充随机颜色

popupOffsets

json

popup偏移量

默认{ ‘top’: [0, 0], ‘left’: [20, 0], ‘bottom’: [0, 0], }

clickCallBack

function

点击标签回调

overCallBack

function

鼠标滑过标签回调

clickCallBackName

function

点击标签触发地图事件名

overCallBackName

function

鼠标经过触发地图事件名称

barMargin

Number

柱间距

默认10

barMaxWidth

Number

柱最大宽度

默认100

参数名

类型

说明

addToMap

mapboxgl.Map

将图层添加到地图并渲染

remove

-

移除当前图层

上一篇：three.js加载Obj三维模型

下一篇：Centos7.4上部署PostgreSQL12和PostGIS3.0